React useActionState：现代表单管理的综合指南

这种方法可行，但有几个缺点：

• 样板代码：我们需要三次独立的 useState 调用来管理概念上属于单个表单提交过程的状态。
• 手动状态管理：开发者负责在 try...catch...finally 块中按正确顺序手动设置和重置加载和错误状态。这很重复且容易出错。
• 耦合：处理表单提交结果的逻辑与组件的渲染逻辑紧密耦合。

引入 useActionState：一次范式转变

useActionState 是一个专为管理异步操作（如表单提交）状态而设计的 React Hook。它通过将状态直接与操作函数的结果关联起来，简化了整个过程。

它的签名清晰简洁：

const [state, formAction] = useActionState(actionFn, initialState);

让我们来分解一下它的组成部分：

• actionFn(previousState, formData): 这是您执行工作的异步函数（例如，调用 API）。它接收先前的状态和表单数据作为参数。关键在于，此函数返回的任何内容都将成为新的状态。
• initialState: 这是操作首次执行前状态的值。
• state: 这是当前的状态。它最初持有 initialState，并在每次执行 actionFn 后更新为该函数的返回值。
• formAction: 这是您操作函数的一个新的、经过包装的版本。您应该将此函数传递给 <form> 元素的 action 属性。React 使用这个包装后的函数来跟踪操作的等待状态。

实践示例：使用 useActionState 进行重构

现在，让我们使用 useActionState 来重构我们的产品表单。改进立竿见影。

首先，我们需要调整我们的操作逻辑。操作不应该抛出错误，而是应该返回一个描述结果的状态对象。

示例：使用 useActionState 的‘新方法’

// 为 useActionState 设计的操作函数
const addProductAction = async (previousState, formData) => {
const productName = formData.get('productName');
await new Promise(resolve => setTimeout(resolve, 1500)); // 模拟网络延迟

if (!productName || productName.length < 3) {
return { message: '产品名称必须至少为 3 个字符。', success: false };
}

console.log(`产品 "${productName}" 已添加。`);
// 成功时，返回成功消息。
return { message: `成功添加 "${productName}"`, success: true };
};

// 重构后的组件
import { useActionState } from 'react';
// 注意：我们将在下一节添加 useFormStatus 来处理等待状态。

function NewProductForm() {
const initialState = { message: null, success: false };
const [state, formAction] = useActionState(addProductAction, initialState);

return (

看看这有多么简洁！我们用一个 useActionState Hook 替换了三个 useState Hook。组件的职责现在纯粹是根据 `state` 对象来渲染 UI。所有的业务逻辑都被整洁地封装在 `addProductAction` 函数中。状态会根据操作的返回值自动更新。

但是等等，等待状态怎么办？我们如何在表单提交时禁用按钮？

使用 useFormStatus 处理等待状态

React 提供了一个配套的 Hook，useFormStatus，正是为了解决这个问题而设计的。它提供了上一次表单提交的状态信息，但有一个关键规则：它必须在您想要跟踪其状态的 <form> 内部渲染的组件中调用。

这鼓励了一种清晰的关注点分离。您可以创建一个专门用于需要感知表单提交状态的 UI 元素（如提交按钮）的组件。

useFormStatus Hook 返回一个包含多个属性的对象，其中最重要的是 `pending`。

const { pending, data, method, action } = useFormStatus();

• pending: 一个布尔值，如果父表单当前正在提交，则为 `true`，否则为 `false`。
• data: 一个 `FormData` 对象，包含正在提交的数据。
• method: 一个字符串，指示 HTTP 方法（`'get'` 或 `'post'`）。
• action: 对传递给表单 `action` 属性的函数的引用。

创建一个感知状态的提交按钮

让我们创建一个专用的 `SubmitButton` 组件，并将其集成到我们的表单中。

示例：SubmitButton 组件

import { useFormStatus } from 'react-dom';
// 注意：useFormStatus 是从 'react-dom' 导入，而不是 'react'。

function SubmitButton() {
const { pending } = useFormStatus();

return (

{pending ? '添加中...' : '添加产品'}

);
}

现在，我们可以更新我们的主表单组件来使用它。

示例：包含 useActionState 和 useFormStatus 的完整表单

import { useActionState } from 'react';
import { useFormStatus } from 'react-dom';

// ... (addProductAction 函数保持不变)

function SubmitButton() { /* ... 如上定义 ... */ }

function CompleteProductForm() {
const initialState = { message: null, success: false };
const [state, formAction] = useActionState(addProductAction, initialState);

return (

有了这个结构，`CompleteProductForm` 组件不需要知道任何关于等待状态的信息。`SubmitButton` 是完全自包含的。这种组合模式对于构建复杂、可维护的 UI 来说非常强大。

渐进式增强的力量

这种新的基于操作的方法，特别是与 Server Actions 一起使用时，最深远的好处之一是自动实现渐进式增强。这是一个至关重要的概念，用于为全球用户构建应用程序，因为他们的网络条件可能不可靠，或者可能使用旧设备或禁用了 JavaScript。

它的工作原理如下：

1. 没有 JavaScript：如果用户的浏览器没有执行客户端 JavaScript，<form action={...}> 会像标准 HTML 表单一样工作。它会向服务器发出一个完整的页面请求。如果您正在使用像 Next.js 这样的框架，服务器端操作会运行，框架会用新状态重新渲染整个页面（例如，显示验证错误）。应用程序功能齐全，只是没有 SPA 那样的流畅感。
2. 有 JavaScript：一旦 JavaScript 包加载完毕，React 对页面进行水合（hydrate），同一个 `formAction` 就会在客户端执行。它不再是整页重新加载，而是表现得像一个典型的 fetch 请求。操作被调用，状态被更新，只有组件的必要部分会重新渲染。

这意味着您只需编写一次表单逻辑，它就能在这两种场景下无缝工作。您默认构建了一个有弹性、可访问的应用程序，这对全球用户体验来说是一个巨大的胜利。

高级模式与用例

1. 服务器操作 vs. 客户端操作

您传递给 useActionState 的 `actionFn` 可以是一个标准的客户端异步函数（如我们的示例中所示），也可以是一个服务器操作 (Server Action)。服务器操作是在服务器上定义的函数，可以从客户端组件直接调用。在像 Next.js 这样的框架中，您可以通过在函数体顶部添加 "use server"; 指令来定义一个。

• 客户端操作：非常适合只影响客户端状态或直接从客户端调用第三方 API 的变更。
• 服务器操作：非常适合涉及数据库或其他服务器端资源的变更。它们通过消除为每个变更手动创建 API 端点的需要来简化您的架构。

其美妙之处在于 useActionState 对两者同样有效。您可以将客户端操作换成服务器操作，而无需更改组件代码。

2. 使用 `useOptimistic` 实现乐观更新

为了获得更快的响应体验，您可以将 useActionState 与 useOptimistic Hook 结合使用。乐观更新是指您立即更新 UI，*假设*异步操作会成功。如果失败，您再将 UI 恢复到之前的状态。

想象一个社交媒体应用，您在其中添加评论。乐观的做法是，在请求发送到服务器的同时，立即在列表中显示新评论。useOptimistic 被设计为与操作协同工作，使这种模式易于实现。

3. 成功后重置表单

一个常见的需求是在成功提交后清空表单输入。使用 useActionState 有几种方法可以实现这一点。

• Key 属性技巧：正如我们的 `CompleteProductForm` 示例所示，您可以为一个输入框或整个表单分配一个唯一的 `key`。当 key 改变时，React 会卸载旧组件并挂载一个新组件，从而有效地重置其状态。将 key 与成功标志绑定（`key={state.success ? 'success' : 'initial'}`）是一种简单有效的方法。
• 受控组件：如果需要，您仍然可以使用受控组件。通过使用 useState 管理输入框的值，您可以在一个监听 useActionState 成功状态的 useEffect 中调用 setter 函数来清空它。

常见陷阱与最佳实践

• useFormStatus 的位置：请记住，调用 useFormStatus 的组件必须作为 <form> 的子组件渲染。如果它是同级或父级，它将无法工作。
• 可序列化的状态：当使用 Server Actions 时，从您的操作返回的状态对象必须是可序列化的。这意味着它不能包含函数、Symbol 或其他不可序列化的值。坚持使用纯对象、数组、字符串、数字和布尔值。
• 不要在操作中抛出错误：您的操作函数应该优雅地处理错误，并返回一个描述错误的状态对象（例如，`{ success: false, message: '发生错误' }`），而不是 `throw new Error()`。这确保了状态总是可预测地更新。
• 定义清晰的状态结构：从一开始就为您的状态对象建立一个一致的结构。像 `{ data: T | null, message: string | null, success: boolean, errors: Record | null }` 这样的结构可以涵盖许多用例。

useActionState vs. useReducer：快速比较

乍一看，useActionState 可能看起来与 useReducer 相似，因为两者都涉及基于前一个状态来更新状态。然而，它们服务于不同的目的。

• useReducer 是一个通用的 Hook，用于管理客户端上复杂的状态转换。它通过分发操作来触发，非常适合具有许多可能的、同步状态变化的状态逻辑（例如，一个复杂的多步向导）。
• useActionState 是一个专门的 Hook，专为响应单个、通常是异步操作而变化的状态设计。其主要作用是与 HTML 表单、Server Actions 以及 React 的并发渲染特性（如等待状态转换）集成。

结论是：对于表单提交和与表单绑定的异步操作，useActionState 是现代的、为此目的而生的工具。对于其他复杂的客户端状态机，useReducer 仍然是一个绝佳的选择。

结论：拥抱 React 表单的未来

useActionState Hook 不仅仅是一个新的 API；它代表了一种根本性的转变，即在 React 中以一种更健壮、更具声明性、更以用户为中心的方式处理表单和数据变更。通过采用它，您将获得：

• 减少样板代码：一个 Hook 取代了多个 useState 调用和手动状态编排。
• 集成的等待状态：通过配套的 useFormStatus Hook 无缝处理加载中的 UI。
• 内置的渐进式增强：编写的代码无论有无 JavaScript 都能工作，确保所有用户的可访问性和弹性。
• 简化的服务器通信：与 Server Actions 天然契合，简化了全栈开发体验。

当您开始新项目或重构现有项目时，请考虑使用 useActionState。它不仅能通过使您的代码更清晰、更可预测来改善您的开发体验，还能使您能够构建更高质量的应用程序，这些应用程序更快、更有弹性，并能为全球多元化的用户群体所用。